<template>
    <div >
        <el-dialog :model-value="props.visible"
            :before-close="onClose" :width="props.width + 'px'" 
            :close-on-click-modal=false
            append-to-body
        >
        <template #header class="el-dialog__header">
            <span >
               <span class="el-dialog__title">{{ props.title }}</span> 
            </span>
        </template>
        <div class="container" :style="{height:props.height+'px'}">
            <slot name="content"></slot>
        </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="danger"  @click="onClose">取消</el-button>
                    <el-button type="primary" @click="onConfirm"> 确定 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import  type {DialogModel } from '@/types/components'
// 接受父组件参数，withDefaults:设置默认值
const props = withDefaults(defineProps<DialogModel>(),{
    title:'标题', // 设置接受参数的默认值
    visible:false,
    width:630,
    height:280
})
// 注册事件(将组件处理放置到调用组件的vue中进行处理)
const emit = defineEmits(['onClose','onConfirm'])
// 关闭弹框
const onClose = ()=>{
    emit('onClose')  // 父组件调用，自定义处理
}
// 确定弹窗
const onConfirm = ()=>{
    emit('onConfirm')
}
</script>

<style  lang="scss">
.container{
    overflow-x: initial;
    overflow-y: auto;
}

.el-dialog{
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    .el-dialog__header {
        margin-right: 0px;
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
        background-color: #009688 !important;
        .el-dialog__title{
            color: #fff;
            font-size: 16px;
            font-weight: 600;
        }
    }
    .el-dialog__headerbtn{
        .el-dialog__close{
            color: #fff;
        }
    }
    .el-dialog__body{
        padding: 10px;
    }
    .el-dialog__footer{
        padding: 10px;
        border-top: 1px solid #e8eaec !important;
    }
}

</style>